/**
 * @description  : 审批流程组件
 * @descriptionDetail : 审批流程组件
 * @copyright    : 浙江烟草
 * @author       : mc
 * @create       : 2022-10-04 19:11:10
 */
<template>
	<u-time-line>
		<u-time-line-item nodeTop="10">
		    <template #node>
		      <view class="u-node" style="background: gray;">
		        <!-- 此处为uView的icon组件 -->
		        <u-icon name="play-circle" color="#fff" :size="24"></u-icon>
		      </view>
		    </template>
		    <!-- 此处没有自定义左边的内容，会默认显示一个点 -->
		    <template #content>
		      <view>
		        <view class="u-order-desc" style="margin-top: 0 !important;">
					开始
		        </view>
		      </view>
		    </template>
		  </u-time-line-item>
		<u-time-line-item nodeTop="10" v-for="(item,index) in approve" :key="index"> 
		    <template #node>
		      <view class="u-node" :style="{background: getColor(item.opType)}">
		        <!-- 此处为uView的icon组件 -->
		        <u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon>
		      </view>
		    </template>
		    <!-- 此处没有自定义左边的内容，会默认显示一个点 -->
		    <template #content>
		      <view>
		        <view class="u-order-time">
		          <span style="margin-right:5%;">
		            {{ item.opTime }}  {{ item.gfaName }}                     
		          </span>
		          <span>
		            {{ item.approvePersonName }}
		          </span>
		        </view>
		        <view class="u-order-desc">
		          {{ item.approveInfo||'' }}
		        </view>
		      </view>
		    </template>
		  </u-time-line-item>
		  <u-time-line-item nodeTop="10" v-if="haveEnd">
		      <template #node>
		        <view class="u-node" style="background: gray;">
		          <!-- 此处为uView的icon组件 -->
		          <u-icon name="minus-circle" color="#fff" :size="24"></u-icon>
		        </view>
		      </template>
		      <!-- 此处没有自定义左边的内容，会默认显示一个点 -->
		      <template #content>
		        <view>
		          <view class="u-order-desc" style="margin-top: 0 !important;">
		  			结束
		          </view>
		        </view>
		      </template>
		    </u-time-line-item>
	</u-time-line>
</template>
<script>
	export default {
		name: "FlowHis",
		props: {
			approve: {
				type: Array,
				default: () => {
					return [];
				}
			},
			haveEnd:{
				type: Boolean,
				default: false,
			},
		},
		created() {
		},
		data() {
			return {

			};
		},
		methods: {
    getColor(status) {
      if (status === 1) {
        return 'green';
      } else if (status === 3) {
        return 'red';
      } else {
        return 'green';
      }
    },
		},
	}
</script>

<style lang="scss" scoped>
	.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}
	
	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 32rpx;
	}
	
	.u-order-desc {
		color: $u-main-color;
		font-size: 28rpx;
		margin-bottom: 6rpx;
		margin-top: 12rpx;
	}
	
	.u-order-time {
		color: $cm-form-subtitle-color;
		font-size: 26rpx;
	}
</style>